"use client"
import SmallText from "@/components/base/UI/SmallText"
import { useState } from "react";
/**应用场景 */
export default function Apply() {
    return (
        <>
            <div className="flex flex-col justify-center items-center pb-[50px] pt-[60px]">
                <div className='text-[40px] font-bold mt-[70px]'>应用场景</div>
                <SmallText size={28}>APPLICATION SCENARIOS</SmallText>
                <div className="w-full flex mt-[30px]">
                    <ApplyItem title="企业服务" content="提供多样化解决方案，协助企业实现业务升级" iconName="icon-qiyefuwu" className="bg-[url('/apply_1.png')]"/>
                    <ApplyItem title="美容美颜" content="独家AI皮肤分析，打造智慧医美门店" iconName="icon-meiyan" className="bg-[url('/beautify2.png')]"/>
                    <ApplyItem title="在线直播" content="AI数字人 直播新风尚" iconName="icon-zaixianzhibo" className="bg-[url('/broadcast.png')]"/>
                    <ApplyItem title="互联互通" content="精准识别及精细化影像处理，灵活适配各类业务场景" iconName="icon-hulianwang" className="bg-[url('/global_1.png')]"/>
                </div>
            </div>
        </>
    )
}
const ApplyItem=({title,content,iconName,className}:{title:string,content:string,iconName:string,className:string})=>{
    const [isHovered, setIsHovered] = useState(false);
    return (
        <div className={`flex-1 h-[450px] flex justify-center items-center bg-cover text-[#fff] ${className}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
            <div className="absolute flex flex-col z-[999] items-center" style={{
                transform: isHovered ? "translateY(-80px)" : "none",
                transition: "all 0.4s"
            }}>
                <i className={`iconfont ${iconName}`} style={{ fontSize: '100px' }}></i>
                <div className="flex justify-center text-[30px]">{title}</div>
                <div className="text-[18px] text-center mt-3" style={{
                    opacity: isHovered ? 1 : 0,
                    transition: "all 0.4s"
                }}>
                    <p>{content.split('，')[0]}</p>
                    <p>{content.split('，')[1]}</p>
                </div>
            </div>
            <div className="w-full h-full bg-[#7a7a7a] z-[99]" style={{opacity: isHovered ? 0.7 : 0.4,transition: "all 0.4s"}}></div>
        </div>
    )
}